<template>
  <div>
    foo
    {{b}}
    {{this.$store.state.name}}
  </div>
</template>
<script>

export default {
  data() {
    return {
      b:1,
    }
  },
  // 希望有些数据更新实在后端执行
  asyncData({store, params}){//只有页面级组件才有   在服务端调取接口或者数据   这个方法返回个promise
    console.log('foo asyncData')
    console.log(params)
   
    /*
    console.log(params,typeof this)
    this.b =2; //无效   尝试传过来 或者直接this 修改都不行
    console.log(component === this) //true     都是下面这个还没创建实例的对象       拿不到vue实例    不能修改 vue 实例里面的值
    <ref *1> {
      data: [Function: data],
      asyncData: [Function: asyncData],
      beforeCreate: [ [Function: beforeCreate], [Function: c] ],
      created: [Function: created],
      mounted: [Function: mounted],
      methods: { show: [Function: show] },
      render: [Function: r] { _withStripped: true },
      staticRenderFns: [],
      _compiled: true,
      _scopeId: 'data-v-54024074',
      _ssrRegister: [Function: c],
      __file: 'src/components/Foo.vue',
      _Ctor: {
        '0': [Function: a] {
        cid: 3,
        options: [Object],
        super: [Function], 
        ...}
      ...}
    */
    
    return store.dispatch('changeName', 'ssshaha');
    // 服务端执行完毕后 渲染是正常的， 但是前端的vuex是老数据
    // 需要将后端的数据 同步到前端的vuex里
  },
  beforeCreate() {
    console.log(`foo beforeCreate =>time: ${new Date().getTime()}`)
  },
  created() {
    console.log(`foo created  =>time: ${new Date().getTime()}`)
  },
  mounted() { //这个方法 后端不会走
    // this.$store.dispatch('changeName', 'ssshaha');
    console.log('foo mounted')
  },
  methods: {
    show() {
      alert(1)
    }
  }
}
</script>
<style lang="css" scoped>
 div{
   background: red;
 }
</style>